<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			body {
				background: #000;
			}
			
			.wrap {
				margin: 100px auto 0;
				width: 630px;
				height: 394px;
				padding: 10px 0 0 10px;
				background: #000;
				overflow: hidden;
				border: 1px solid #fff;
			}
			
			.wrap li {
				float: left;
				margin: 0 10px 10px 0;
			}
			
			.wrap img {
				display: block;
				border: 0;
			}
		</style>
		<script src="../../day08/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('ul>li').mouseenter(function(){						
					$(this).css("opacity","1").siblings().css("opacity","0.4")
				})
				$(".wrap").mouseleave(function(){					
					$("ul>li").css("opacity","1")
				})
			})
		</script>
	</head>

	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="#"><img src="img/01.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/02.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/03.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/04.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/05.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/06.jpg" alt="" /></a>
				</li>

			</ul>
		</div>

	</body>

</html>